<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:hh="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
<div class="ui container">
    <div class="ui top aligned teal segment">
        <p class="ui center aligned attached">CRUD</p>
    </div>
    <div class="ui top attached aligned segment">
        <!--        <div class="ui action input">-->
        <!--            <input type="text" name="username" placeholder="姓名">-->
        <!--            <button id="search-btn" type="button" class="ui teal button">搜索</button>-->
        <!--        </div>-->
        <div class="ui" id="back">
            <div id="ser_box" class="ui action input">
                <input type="text"  id="ipt" name="username" placeholder="姓名">
                <button  id="search-btn" type="button" class="ui teal button">搜索</button>
            </div>
            <div id="bot_box">
                <ul id="oul"></ul>
            </div>
        </div>
    </div>
    <div id="table-container" class="ui attached segment">
        <table th:fragment="blogList" class="ui orange center celled table">
            <thead>
            <tr>
                <th></th>
                <th>姓名</th>
                <th>电话</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${user.list}">
                <td></td>
                <td th:text="${item.username}">刻意练习清单</td>
                <td th:text="${item.phoneNumber}">认知升级</td>
                <!--            //MM:月 mm:分 HH:24小时展示 hh：12小时展示-->
                <td th:text="${#dates.format(item.date,'yyyy-MM-dd HH:mm:ss')}">是</td>
                <td>
                    <a href="#" class="ui mini teal basic button" th:href="@{/updateUser/{id}(id=${item.id})}">编辑</a>
                    <a href="#" class="ui mini red basic button" th:href="@{/delete/{id}(id=${item.id})}">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="6">
                    <div class="ui mini pagination menu" th:if="${user.total}>1">
                        <a class=" item" th:href="@{'/main?page='+${user.prePage}}" th:unless="${user.isFirstPage}">上一页</a>
                        <a class=" item" th:href="@{'/main?page='+${user.nextPage}}" th:unless="${user.isLastPage}">下一页</a>
                    </div>
                    <a href="#" class="ui mini right floated teal basic button" th:href="@{/second}">新增</a>
                </th>
            </tr>
            </tfoot>
        </table>
        <!--blogList为局部需要更新的数据区域-->
    </div>
</div>
<script src="/js/style.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
    $('#search-btn').click(function () {
        $("#bot_box").css("display","none");
        loaddata();
    });
    function loaddata() {
        $("#table-container").load(/*[[@{/main/search}]]*/"/main/search",{
            username : $("[name='username']").val()
        });
    }
    $(document).ready(function(){
        $("#back").mouseover(function(){
            $("#bot_box").css("display","block");
        });
        $("#back").mouseout(function(){
            $("#bot_box").css("display","none");
        });
    });
</script>
</body>
</html>